<template>
  <!-- <div>仿soul旋转球</div> -->
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import { useRouter } from "vue-router";

const router = useRouter();

// Viewer
let viewer = null;

onMounted(() => {
  initViewer(); 
  addLabels();
});

const initViewer = () => {
  viewer = new Cesium.Viewer("cesiumContainer", {
    animation: false, //是否创建动画小器件，左下角仪表
    baseLayerPicker: false, //是否显示图层选择器
    fullscreenButton: false, //是否显示全屏按钮
    vrButton: false, // 用于切换 VR 模式的单个按钮小部件。
    geocoder: false, // //是否显示geocoder小器件，右上角查询按钮
    homeButton: false, //是否显示Home按钮
    infoBox: false, //是否显示信息框
    sceneModePicker: false, //是否显示3D/2D选择器
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, //是否显示时间轴
    navigationHelpButton: false, //是否显示右上角的帮助按钮
    navigationInstructionsInitiallyVisible: false,
    scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    shouldAnimate: true, // 初始化是否开始动画
    clockViewModel: undefined, // 一个视图模型，它为用户界面提供 Clock
    fullscreenElement: document.body, //全屏时渲染的HTML元素,
    useDefaultRenderLoop: true, //如果需要控制渲染循环，则设为true
    targetFrameRate: undefined, //使用默认render loop时的帧率
    showRenderLoopErrors: false, //如果设为true，将在一个HTML面板中显示错误信息
    automaticallyTrackDataSourceClocks: false, //自动追踪最近添加的数据源的时钟设置
    contextOptions: {}, //传递给Scene对象的上下文参数（scene.options）
    sceneMode: Cesium.SceneMode.SCENE3D, //初始场景模式
    mapProjection: new Cesium.WebMercatorProjection(), //地图投影体系
    globe: undefined, // 在场景中渲染的地球仪，包括其地形 ( Globe#terrainProvider ) 和图像图层 ( Globe#imageryLayers )
    orderIndependentTranslucency: true,
    dataSources: new Cesium.DataSourceCollection(), //需要进行可视化的数据源的集合
    projectionPicker: undefined, //ProjectionPicker 是用于在透视和正交投影之间切换的单按钮小部件。
   // terrainProvider: new Cesium.EllipsoidTerrainProvider(), //地形图层提供者，仅baseLayerPicker设为false有意义
    imageryProvider: new Cesium.SingleTileImageryProvider({
      url: "/imgs/transparent.png", // 透明的贴图
      rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90),
    }),
  });

  // 去除版权信息
  viewer.cesiumWidget.creditContainer.style.display = "none";

  // 启用地球自转
  viewer.clock.shouldAnimate = true;

  // 设置时钟使用系统时间
  viewer.clock.currentTime = Cesium.JulianDate.fromDate(new Date());

  // 添加一个回调函数来更新时钟时间
  viewer.clock.onTick.addEventListener(updateClock);

  // 获取场景对象
  const scene = viewer.scene;

  // 获取地球对象
  const globe = scene.globe;

  // 禁止缩放
  scene.screenSpaceCameraController.enableZoom =false;

  // 启用地球透明
  viewer.imageryLayers.removeAll();

  // 设置鼠标事件监听器
  // const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
  // handler.setInputAction(function(event) {
  //       viewer.clock.shouldAnimate = false;
  // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


  // 输入代码为：
  // viewer.camera.position
  // viewer.camera.heading
  // viewer.camera.pitch
  // viewer.camera.roll

  // 设置相机位置
  // viewer.camera.setView({
  //   // 设置相机位置
  //   destination: {
  //       x: -2388744.838660655,
  //       y: 5388613.2412665,
  //       z: 2429186.308668634
  //   },
  //   orientation: {
  //       // 初始视角
  //       heading: 1.0639406240008213,
  //       pitch: -0.013688041766217074,
  //       roll: 0.00002273530734786533
  //   }
  // });


 

  // 地球球体透明
  globe.showGroundAtmosphere = false;
  globe.baseColor = Cesium.Color.TRANSPARENT;
  globe.translucency.enabled = true;
  globe.undergroundColor = undefined;
  globe.translucency.frontFaceAlpha = 1.0; // 正面透明度
  globe.translucency.backFaceAlpha = 1.0; // 背面透明度


  // 关闭大气层
  scene.skyAtmosphere.show=false;
  // 关闭太阳投射而成的阴影
  viewer.shadows = false;
  // 关闭场景中的阴影贴图
  scene.shadowMap.enabled = false;
};

// 暂停地球自转的函数
const pauseRotation = () => {
  viewer.clock.shouldAnimate = false;
}

// 恢复地球自转的函数
const resumeRotation = () => {
  viewer.clock.shouldAnimate = true;
}

const updateClock = (clock) => {
  // 更新时钟时间
  const date = new Date();
  const currentTime = Cesium.JulianDate.fromDate(date);
  clock.currentTime = currentTime;

  // 获取场景对象
  const scene = viewer.scene;

  // 设置地球自转角度
  const multiplier = 0.000000009; // 自转速度（调整以控制自转速度）
  if (viewer.clock.shouldAnimate) {
    const angle = Cesium.Math.TWO_PI * multiplier * clock.currentTime.secondsOfDay;
    scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, angle);
  }
};

// 生成均匀分布的坐标
const generateUniformCoordinatesOnEarthSurface = (count) => {
    var coordinates = [];
    var dlong = 360 / count;
    var dlat = 180 / (count / 2 - 1);
    var radius = Cesium.Ellipsoid.WGS84.maximumRadius;

    for (var i = 0; i < count / 2; i++) {
      var lat = i * dlat - 90;

      for (var j = 0; j < count; j++) {
        var lon = j * dlong - 180;

        coordinates.push({
          longitude: lon,
          latitude: lat,
          radius: radius
        });
      }
    }

    return coordinates;
};


      

const addLabels = () => {
  // 生成均匀分布的坐标
  const coordinates = generateUniformCoordinatesOnEarthSurface(14);


  // 创建点实体
  for (var i = 0; i < coordinates.length; i++) {
    const coordinate = coordinates[i];
    // 创建一个屏幕空间事件处理程序
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    const entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(coordinate.longitude, coordinate.latitude, coordinate.height),
        // 点
        point: {
          color: Cesium.Color.fromRandom(), // 点位颜色
          pixelSize: 25 // 像素点大小
        },
        // 文字
        label: {
          // 文本。支持显式换行符“ \ n”
          text: '测试名称',
          // 字体样式，以CSS语法指定字体
          font: '16px sans-serif',
          // 修改文字颜色
          fillColor: Cesium.Color.fromCssColorString("#FFFFFF").withAlpha(1),
          // 相对于坐标的水平位置
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          // 相对于坐标的水平位置
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
          pixelOffset: new Cesium.Cartesian2(0, -30),
        }
      });
    // 点击事件处理程序
    handler.setInputAction(function (click) {
      var pickedObject = viewer.scene.pick(click.position);
      if (Cesium.defined(pickedObject)) {
        var pickedEntity = pickedObject.id;
        if (pickedEntity === entity) {
          console.log("Clicked entity:", pickedEntity);
          // 在这里执行你的点击事件处理逻辑
          router.push("/movie");
        }
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  } 
}


</script>

<style lang="scss" scoped>
#cesiumContainer {
  height: 100%;
}
</style>
